<template>
  <el-container class="blogs-container">
    <el-main class="blogs-main">
      <!-- 头部标题和分类按钮 -->
      <el-row class="header-section">
        <el-col :span="12">
          <el-text class="page-title" size="large" tag="strong">博客天地</el-text>
        </el-col>
        <el-col :span="12" class="buttons-col">
          <el-button 
            :type="activeCategory === 'tech' ? 'primary' : 'default'"
            @click="setCategory('tech')"
            size="small"
          >
            技术博客
          </el-button>
          <el-button 
            :type="activeCategory === 'travel' ? 'primary' : 'default'"
            @click="setCategory('travel')"
            size="small"
          >
            旅游博客
          </el-button>
        </el-col>
      </el-row>

      <!-- 博客列表 -->
      <el-row :gutter="20" class="blogs-grid">
        <el-col 
          v-for="blog in filteredBlogs" 
          :key="blog.id"
          :span="24" 
          :md="12" 
          :lg="8"
          class="blog-col"
        >
          <el-card class="blog-card" shadow="hover" @click="goToBlogDetail(blog.id)">
            <el-row class="card-content">
              <!-- 博客封面 -->
              <el-col :span="24" class="cover-col">
                <el-image 
                  :src="blog.cover"
                  class="blog-cover"
                  fit="cover"
                  :alt="blog.title"
                />
              </el-col>
              
              <!-- 博客标题 -->
              <el-col :span="24" class="title-col">
                <el-text class="blog-title" size="large" tag="strong">{{ blog.title }}</el-text>
              </el-col>
              
              <!-- 博客摘要 -->
              <el-col :span="24" class="summary-col">
                <el-text class="blog-summary" size="small" type="secondary">
                  {{ blog.summary }}
                </el-text>
              </el-col>
              
              <!-- 博客信息 -->
              <el-col :span="24" class="info-col">
                <el-row justify="space-between">
                  <el-col :span="12">
                    <el-text size="small" type="info">
                      <el-icon :size="14"><User /></el-icon>
                      {{ blog.author }}
                    </el-text>
                  </el-col>
                  <el-col :span="12" class="date-col">
                    <el-text size="small" type="info">
                      {{ blog.date }}
                    </el-text>
                  </el-col>
                </el-row>
              </el-col>
              
              <!-- 标签 -->
              <el-col :span="24" class="tags-col">
                <el-space :size="4" wrap>
                  <el-tag 
                    v-for="tag in blog.tags" 
                    :key="tag"
                    size="small"
                    :type="tag === '技术' ? 'primary' : tag === '旅游' ? 'success' : 'info'"
                  >
                    {{ tag }}
                  </el-tag>
                </el-space>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { BlogApi, BlogInfo, BlogQuery } from '@/api/system/blog'


const router = useRouter()// 跳转到博客详情页
// 博客卡片点击
const goToBlogDetail = (blogId) => {
  router.push({
    name: 'ArticleDetail',  // 路由名称
    params: { id: blogId },
    query: { type: 'blog' }
  })
}

// 活跃分类
const activeCategory = ref('tech')

// 设置分类
const setCategory = (category: string) => {
  activeCategory.value = category
}

// 查询表单
const queryForm = reactive<BlogQuery>({
  page: 1,
  pageSize: 10,
  title: '',
  type: '',
  status: ''
})

const blogsData = ref<BlogInfo[]>([])
const loading = ref(false)
// 查询方法
const loadBlogs = async () => {
  try {
    loading.value = true
    const response = await BlogApi.getBlogList(queryForm)
    console.log("博客",response)
    blogsData.value = response.data || []
    
  } catch (error) {
    ElMessage.error('获取博客列表失败')
  } finally {
    loading.value = false
  }
}

// // 博客数据
// const blogsData = ref([
//   {
//     id: 1,
//     title: 'Vue 3 Composition API 实战指南',
//     summary: '深入解析Vue 3的新特性，带你掌握Composition API的核心用法和最佳实践',
//     author: '张三',
//     date: '2023-12-01',
//     type: 'tech',
//     tags: ['Vue', '前端', '技术'],
//     cover: 'https://picsum.photos/300/200?random=1'
//   }
// ])

// 过滤后的博客
const filteredBlogs = computed(() => {
  return blogsData.value.filter(blog => blog.type === activeCategory.value)
})

onMounted(() => {
  loadBlogs()
})
</script>

<style scoped>
.blogs-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.blogs-main {
  padding: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.header-section {
  margin-bottom: 30px;
  align-items: center;
}

.page-title {
  font-size: 28px;
  color: #303133;
  display: block;
}

.buttons-col {
  text-align: right;
}

.buttons-col .el-button {
  margin-left: 10px;
}

.blogs-grid {
  margin: 0 -10px;
}

.blog-col {
  padding: 0 10px;
  margin-bottom: 20px;
}

.blog-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  cursor: pointer;
  transition: all 0.3s;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 15px;
}

.cover-col {
  margin-bottom: 15px;
}

.blog-cover {
  width: 100%;
  height: 150px;
  border-radius: 4px;
}

.title-col {
  margin-bottom: 10px;
}

.blog-title {
  font-size: 16px;
  color: #303133;
  line-height: 1.4;
  display: block;
}

.summary-col {
  margin-bottom: 15px;
  min-height: 60px;
}

.blog-summary {
  line-height: 1.5;
  display: block;
}

.info-col {
  margin-bottom: 10px;
}

.date-col {
  text-align: right;
}

.tags-col {
  text-align: left;
}

:deep(.el-card__body) {
  padding: 0;
}

@media (max-width: 768px) {
  .blogs-main {
    padding: 20px 15px;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .buttons-col {
    text-align: left;
    margin-top: 15px;
  }
  
  .blog-col {
    margin-bottom: 15px;
  }
}
</style>